import { Card } from 'antd'
import ReactECharts from 'echarts-for-react'
import { useState } from 'react'
function Enterprise() {
  const colors = ['#5470c6', '#91cc75', '#fac858']
  const [option] = useState({
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      data: ['科技企业', '高新企业', '国营企业']
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        // prettier-ignore
        data: ['2014', '2016', '2018', '2020', '2022', '2024']
      }
    ],
    yAxis: {
      type: 'value',
      name: '企业资质情况(家)',
      position: 'left',
      alignTicks: true,
      nameTextStyle: {
        color: '#000',
        fontWeight: 'bold'
      }
    },
    series: [
      {
        name: '科技企业',
        type: 'bar',
        data: [100, 200, 374, 264, 288, 388]
      },
      {
        name: '高新企业',
        type: 'bar',
        data: [458, 368, 188, 688, 588, 688]
      },
      {
        name: '国营企业',
        type: 'bar',
        data: [288, 388, 488, 188, 288, 588]
      }
    ]
  })
  return (
    <>
      <Card title="企业资质情况" variant="borderless">
        <ReactECharts option={option} style={{ height: '200px' }} />
      </Card>
    </>
  )
}

export default Enterprise
